﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>fullPage-05分页导航</title>
    <style>
        .section {
            text-align: center;
            font: 40px "microsoft Yahei";
            color: #ffffff;
        }
    </style>
    <link rel="stylesheet" href="../Css/jquery.fullpage.css">
    <script src="../Scripts/jquery-1.12.2.min.js"></script>
    <script src="../Scripts/jquery.fullpage.js"></script>
    <script>
        $(function() {
            $("#fullPage").fullpage({
                // 控制分页的背景颜色
                sectionsColor: ['#BFDA00', '#2EBE21', '#2C3E50', '#FF9900'],
                // 控制是否显示右侧导航
                navigation: true
            });
        })
    </script>
</head>

<body>
    <div id="fullPage">
        <div class="section section1">
            <h1>这是第一屏</h1>
        </div>
        <div class="section section2">
            <li class="slide">
                <h4>第二屏的第一屏</h4></li>
            <li class="slide">
                <h4>第二屏的第二屏</h4></li>
            <li class="slide">
                <h4>第二屏的第三屏</h4></li>
        </div>
        <div class="section section3">
            <h1>这是第三屏</h1>
        </div>
        <div class="section section4">
            <h1>这是第四屏</h1>
        </div>
    </div>
</body>

</html>
